<template>
  <el-container class="moduleWrapper">
    <el-header class="header"
               height='60px'>
      <div class="title">
        <img width='50px'
             height="50px"
             src="@/assets/images/logo.png" />
        <div>正声法律服务机构</div>
      </div>
      <el-menu :default-active="topIndex"
               class="topMenu"
               mode="horizontal"
               text-color="#fff"
               background-color='#182B5C'
               active-text-color="#182B5C">
        <el-menu-item v-for="(menu, index) in menus"
                      :key="index"
                      :data-index='index'
                      :index="index.toString()"
                      @click="navigationMenuClickEvt(menu, index)">
          <i v-if="index === 0"
             class="icon iconfont activity_fill el-icon-extend-activity_fill"
             style="font-size:24px"></i>
          <i v-if="index === 1"
             class="icon iconfont el-icon-extend-zaixianhudong"
             style="font-size:21px"></i>
          <i v-if="index === 2"
             class="icon iconfont el-icon-extend-danwei"></i>
          <i v-if="index === 6"
             class="icon iconfont el-icon-extend-huodong"
             style="font-size:20px"></i>
          <i v-if="index === 3"
             class="icon iconfont el-icon-extend-baojifuben"
             style="font-size:21px"></i>
          <i v-if="index === 4"
             class="icon iconfont el-icon-extend-dashuju2"
             style="font-size:18px"></i>
          <i v-if="index === 5"
             class="icon iconfont el-icon-extend-xitongguanli"
             style="font-size:18px"></i>
          <span slot="title">{{menu.name}}</span>
        </el-menu-item>
        <el-submenu index="1"
                    class="personal-center">
          <template slot="title">
            <div class="avatar">
              <img width="30"
                   height="30"
                   :src="loginInfo.photo?url+'/image/'+ loginInfo.photo:require('@/assets/images/timg.jpg')" />
            </div>
            <span class="nickName">{{this.loginInfo.account?this.loginInfo.account:'admin'}}</span>
          </template>
          <el-menu-item class="personal-li"
                        index="1-2"
                        @click="clearLocalCache">清除缓存</el-menu-item>
          <el-menu-item class="personal-li"
                        index="1-3"
                        @click="updataMyInfo">修改资料</el-menu-item>
          <el-menu-item class="personal-li"
                        index="1-4"
                        @click="updateUserPassword">修改密码</el-menu-item>
          <el-menu-item class="personal-li"
                        index="1-5"
                        @click="exit">退出登录</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-header>
    <el-container class="container-main">
      <el-aside width="auto"
                class="leftMenu">
        <div class="navLeader">
          <h3 v-if="isCollapse">功能菜单</h3>
          <p @click="goHome"><span class="icon iconfont el-icon-extend-shouye1"></span></p>
        </div>
        <Sidebar :menuList="menuList"
                 :isCollapse="isCollapse" />
      </el-aside>
      <el-container>
        <el-main class="noPadding">
          <el-row>
            <div class="tabColumn">
              <div class="tabWrapper">
                <div class="navBar"
                     @click="handleClickBar">
                  <el-button icon="el-icon-s-fold"
                             plain></el-button>
                </div>
                <div class="tabMain">
                  <tab-nav :editableTabs="options"
                           @closeTab='closeCurrent'
                           @changeMenu='changeMenu'
                           :editableTabsValue='activeIndex' />
                </div>
              </div>
              <div class="tabUsed">
                <el-dropdown>
                  <el-button type="primary">
                    标签操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="closeCurrent($route.path)">关闭当前</el-dropdown-item>
                    <el-dropdown-item @click.native="closeOther($route.path)">关闭其它</el-dropdown-item>
                    <el-dropdown-item @click.native="closeAll">关闭所有</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <!-- <el-button width='80' icon="el-icon-check" plain @click="handleClickTabUsed">页签操作</el-button>
                <ul class="tabUsedDrop" v-if="isTabShow">
                  <li @click="closeCurrent($route.path)">关闭当前</li>
                  <li @click="closeOther">关闭其它</li>
                  <li @click="closeAll">关闭所有</li>
                </ul> -->
              </div>
              <div class="tabScreen"
                   @click="handleFullScreen">
                <span class="icon iconfont el-icon-extend-quanping"></span>
              </div>
            </div>
          </el-row>
          <el-main class="appMain">
            <router-view :key="mainId" />
          </el-main>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog title="修改密码"
               class="passWordDialog"
               :visible.sync="updatePasswordVisible"
               :before-close="cancel">
      <el-form label-position='right'
               label-width="70px"
               :model="updatePasswordFormData"
               size="small">
        <el-form-item label="当前密码">
          <el-input type="password"
                    v-model="updatePasswordFormData.currentPassword"
                    placeholder="请输入当前密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input type="password"
                    v-model="updatePasswordFormData.newPassword"
                    placeholder="请输入新密码"></el-input>
        </el-form-item>
        <!-- <el-form-item label="确认新密码">
          <el-input type="password" v-model="updatePasswordFormData.confirmNewPassword" placeholder="请输入新密码"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="cancel"
                   size="small">取 消</el-button>
        <el-button type="primary"
                   @click="saveNewPwd"
                   size="small">提 交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="个人信息"
               :visible.sync="dialogmyFormVisible"
               :before-close="cancel"
               class="dialog_style">
      <div class="formWrapper">
        <el-form class="myInfo"
                 :model="myInfo"
                 :rules="rules"
                 ref="myInfo"
                 label-width="95px"
                 size="small">
          <el-divider content-position="left">基本信息</el-divider>
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="账号："
                            prop="name">
                <el-input v-model="myInfo.account"
                          placeholder="账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名："
                            prop="name">
                <el-input v-model="myInfo.name"
                          placeholder="姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式："
                            prop="phone">
                <el-input v-model="myInfo.phone"
                          placeholder="联系方式"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件代码："
                            prop="idCardCode">
                <el-select filterable
                           style="width:100%"
                           v-model="myInfo.idCardCode"
                           placeholder="证件代码：">
                  <el-option v-for="item in cardOption"
                             :key="item.id"
                             :value="item.value"
                             :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码"
                            label-width="100px"
                            prop="idCardNumber">
                <el-input v-model="myInfo.idCardNumber"
                          placeholder="身份证号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属部门："
                            prop="deptId">
                <el-select filterable
                           style="width:100%"
                           v-model="myInfo.deptId"
                           placeholder="所属部门">
                  <el-option v-for="item in deptOption"
                             :key="item.id"
                             :value="item.id"
                             :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色：">
                <el-select v-model="myInfo.roleIdList"
                           style="width:100%"
                           clearable
                           filterable
                           multiple
                           placeholder="请选择角色">
                  <el-option v-for="item in allRole"
                             :key="item.id"
                             :value="item.id"
                             :label="item.roleName"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别："
                            prop="sex">
                <el-select filterable
                           style="width:100%"
                           v-model="myInfo.sex"
                           placeholder="性别">
                  <el-option v-for="item in genderOption"
                             :key="item.id"
                             :value="item.value"
                             :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户类型："
                            prop="type">
                <el-select filterable
                           style="width:100%"
                           v-model="myInfo.type"
                           placeholder="用户类型">
                  <el-option v-for="item in typeOption"
                             :key="item.id"
                             :value="item.value"
                             :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="律师编号："
                            prop="lawyerCode">
                <el-input v-model="myInfo.lawyerCode"
                          placeholder="律师编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="证件扫描件："
                            class="spcialLabel4">
                <app-file ref="appUpload"
                          v-model="myInfo.certificateFile"></app-file>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生日："
                            prop="birthday">
                <el-date-picker style="width:100%"
                                v-model="myInfo.birthday"
                                value-format="timestamp"
                                format="yyyy 年 MM 月 dd 日"
                                placeholder="选择日期时间"
                                :picker-options="dataPickerBeforeTodayOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族："
                            prop="nation">
                <el-select filterable
                           style="width:100%"
                           v-model="myInfo.nation"
                           placeholder="民族">
                  <el-option v-for="item in nationOption"
                             :key="item.id"
                             :value="item.value"
                             :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="政治面貌："
                            prop="politicsStatus">
                <el-select filterable
                           style="width:100%"
                           v-model="myInfo.politicsStatus"
                           placeholder="政治面貌">
                  <el-option v-for="item in politicalStatusOption"
                             :key="item.id"
                             :value="item.value"
                             :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学历："
                            prop="education">
                <el-select filterable
                           style="width:100%"
                           v-model="myInfo.education"
                           placeholder="学历">
                  <el-option v-for="item in educationOption"
                             :key="item.id"
                             :value="item.value"
                             :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业学校："
                            prop="school">
                <el-input v-model="myInfo.school"
                          placeholder="毕业学校"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专业："
                            prop="major">
                <el-input v-model="myInfo.major"
                          placeholder="专业"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱："
                            prop="major">
                <el-input v-model="myInfo.email"
                          placeholder="邮箱"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="启用："
                            prop="disableStatus">
                <el-select filterable
                           style="width:100%"
                           v-model="myInfo.disableStatus"
                           placeholder="启用">
                  <el-option :key="1"
                             :value="1"
                             label="是"></el-option>
                  <el-option :key="0"
                             :value="0"
                             label="否"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="照片"
                            class="spcialLabel4">
                <app-upload ref="appUpload"
                            v-model="myInfo.photo"></app-upload>
              </el-form-item>
            </el-col>
            <el-col :span='24'>

            </el-col>
          </el-row>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button size="small"
                     @click="cancel('myInfo')">取 消</el-button>
          <el-button size="small"
                     type="primary"
                     @click="saveMyInfo('myInfo')">提 交</el-button>
        </div>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import Sidebar from '@/components/common/AppNav'
import tabNav from '@/components/common/tabNav'
import AppUpload from '@/components/AppAvatarUpload'
import AppFile from '@/components/AppLoadFileSingle'
import { logout, updateUserPwd, allDict, findDeptList, findUserPermissionTree } from '@/http/AppApi'
import { clearLocalStrorage, setDictInfo } from '@/utils/LocalDataUtil'
import { clearSessionStorage, getUserInfo, setUserInfo, setUserPermissionTree } from '@/utils/SessionDataUtil'
import { getDictDataOption } from '@/utils/getDictDataOption'
import { validateIdefer, validatePhone } from '@/utils/validate'
import { updateUser, getUser, getAllRole } from '@/http/setApi'
import conf from '@/config/index'
export default {
  name: 'app',
  data () {
    return {
      url: conf.serverUrl(),
      topIndex: '0',
      mainId: '',
      isTabShow: false,
      needTagsView: true,
      isCollapse: true,
      updatePasswordVisible: false,
      dialogmyFormVisible: false,
      menus: [],
      menuList: [],
      allRole: [],
      typeOption: [],
      cardOption: [],
      deptOption: [],
      genderOption: [],
      nationOption: [],
      educationOption: [],
      politicalStatusOption: [],
      loginInfo: {},
      myInfo: {},
      updatePasswordFormData: {},
      dataPickerBeforeTodayOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      rules: {
        account: [{
          required: true,
          message: '填写账号',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '填写姓名',
          trigger: 'blur'
        }],
        deptId: [{
          required: true,
          message: '请选择部门',
          trigger: 'change'
        }],
        idCardCode: [{
          required: true,
          message: '请选择证件类型',
          trigger: 'change'
        }],
        idCardNumber: [{
          required: true,
          validator: validateIdefer,
          message: '请填写身份证',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          validator: validatePhone,
          message: '请填写手机号',
          trigger: 'blur'
        }],
        disableStatus: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }]
      }
    }
  },
  components: { Sidebar, tabNav, AppUpload, AppFile },
  mounted () {
    // this.getMyInfo()
    // this.getModules()
    // this.loadDictData()// 字典
    this.menus = [
      {
        name: '栏目1',
        uri: '/user',
        children: [

        ]
      }
    ]
  },
  updated () {

  },
  computed: {
    options () {
      return this.$store.state.options
    },
    newid () {
      return this.$route.path
    },
    activeIndex: {
      get () {
        return this.$store.state.activeIndex
      },
      set (val) {
        this.$store.dispatch('setAction', val)
      }
    }
  },
  methods: {
    async getMyInfo () {
      let loginInfo = await getUserInfo()
      if (loginInfo) {
        this.loginInfo = loginInfo
      } else {
        // this.getMyInfo()
      }
    },
    loadDictData () {
      allDict().then(resp => {
        if (resp.code && resp.code === '200') {
          setDictInfo(resp.data)
          this.genderOption = getDictDataOption('性别')
          this.cardOption = getDictDataOption('证件代码')
          this.nationOption = getDictDataOption('民族')
          this.politicalStatusOption = getDictDataOption('政治面貌')
          this.educationOption = getDictDataOption('学历')
          this.typeOption = getDictDataOption('人员类型')
          return false
        }
      })
    },
    saveMyInfo (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.myInfo.id) {
            updateUser(this.myInfo).then(resp => {
              if (resp.code && resp.code === '200') {
                this.cancel(formName)
                setUserInfo(this.myInfo)
                this.loginInfo = this.myInfo
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
              } else {
                this.$message({
                  type: 'success',
                  message: resp.data
                })
              }
            })
          }
        }
      })
    },
    getModules () {
      let m = this
      findUserPermissionTree().then(resp => {
        if (resp.code && resp.code === '200') {
          this.menus = resp.data
          setUserPermissionTree(resp.data)
          if (!this.menus.length) return false
          m.modules = m.getModulesPermission(resp.data)
          let index = localStorage.getItem('topIndex')
          if (index) this.topIndex = index.toString()
          if (index) {
            if (this.menus[index].children.length > 0) {
              this.menuList = this.menus[index].children
            } else {
              this.menuList = [this.menus[index]]
            }
          } else {
            this.$router.push({ path: '/index' })
            this.menuList = this.menus[0].children
            console.log(this.menuList)
          }
        }
      })
    },
    getModulesPermission (userPermission) {
      if (userPermission && userPermission.length > 0) {
        let modules = []
        for (let i = 0; i < userPermission.length; i++) {
          if (userPermission[i].type === 'module') {
            modules.push(userPermission[i])
          } else continue
        }
        return modules
      } else return []
    },
    navigationMenuClickEvt (data, index) {
      this.menuList = []
      localStorage.setItem('topIndex', index)
      this.topIndex = index.toString()
      let menu = data.children
      if (menu.length === 0) {
        this.menuList = [data]
      } else {
        this.menuList = []
        this.$nextTick(() => {
          this.menuList = menu
        })
      }
      this.$router.push({ path: data.uri })
      // this.activeIndex = data.uri
    },
    getAllRole () {
      getAllRole().then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.allRole = data
        }
      })
    },
    changeMenu (name) {
      this.menuList = []
      for (let index = 0; index < this.options.length; index++) {
        const option = this.options[index]
        if (option.route === name) {
          let menu = this.menus[option.index].children
          if (menu.length === 0) {
            this.$nextTick(() => {
              this.menuList = [this.menus[option.index]]
              this.$router.push({ path: name })
            })
          } else {
            this.$nextTick(() => {
              this.menuList = menu
              this.$router.push({ path: name })
            })
          }
          this.$nextTick(() => {
            localStorage.setItem('topIndex', option.index)
            this.topIndex = option.index
          })
          break
        }
      }
    },
    closeCurrent (name) {
      let curRute = this.$route.path
      this.menuList = []
      let route = this.$route
      this.$store.dispatch('deleteAction', route.path)
      let options = this.options
      if (options.length === 0) {
        localStorage.setItem('topIndex', '0')
        this.topIndex = '0'
        this.$router.push({ path: '/' })
        this.$nextTick(() => {
          this.menuList = []
          this.menuList = this.menus[0].children
        })
      } else {
        if (name === curRute) {
          let path = options[options.length - 1].route
          let index = parseInt(options[options.length - 1].index)
          this.$store.dispatch('setAction', path)
          localStorage.setItem('topIndex', index.toString())
          this.topIndex = index.toString()
          if (this.menus[index].children.length > 0) {
            this.$nextTick(() => {
              this.menuList = this.menus[index].children
            })
          } else {
            this.$nextTick(() => {
              this.menuList = [this.menus[index]]
            })
          }
          this.$router.push({ path: path })
        }
      }
    },
    closeOther (name) {
      let options = JSON.parse(JSON.stringify(this.options))
      if (options.length < 2) return false
      for (let i = 0; i < options.length; i++) {
        const option = options[i]
        if (option.route !== name) {
          this.$store.dispatch('deleteAction', option.route)
        }
      }
    },
    closeAll () {
      this.$store.dispatch('cleartAction')
      this.$nextTick(() => {
        this.menuList = []
        this.menuList = this.menus[0].children
      })
      this.$router.push({ path: '/' })
      localStorage.setItem('topIndex', '0')
      this.topIndex = '0'
    },
    handleClickBar () {
      this.isCollapse = !this.isCollapse
    },
    handleClickTabUsed () {
      this.isTabShow = !this.isTabShow
    },
    goHome () {
      this.closeAll()
    },
    clearLocalCache () {
      clearLocalStrorage()
    },
    exit () {
      sessionStorage.removeItem('currentTabName')
      // 请求退出接口，然后删除token数据
      logout().then(resp => {
        if (resp.code && resp.code === '200') {
          console.log('logout success')
        }
      })
      clearSessionStorage()
      clearLocalStrorage()
      this.closeAll()
      this.$router.push({ name: 'login', params: { error: 'lougout' } })
    },
    handleFullScreen () {
      var el = document.documentElement
      var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen
      if (typeof rfs !== 'undefined' && rfs) {
        rfs.call(el)
      };
    },
    updateUserPassword () {
      this.updatePasswordVisible = true
    },
    saveNewPwd () {
      if (this.updatePasswordFormData) {
        let _this = this
        updateUserPwd(this.updatePasswordFormData).then(data => {
          if (data && data.code === '200') {
            _this.exit()
          }
        })
      }
    },
    cancel (formName) {
      this.dialogmyFormVisible = false
      this.updatePasswordVisible = false
      if (formName === 'myInfo') this.$refs[formName].resetFields()
    },
    errorHandler () {
      return true
    },
    updataMyInfo () {
      this.dialogmyFormVisible = true
      this.getUser(this.loginInfo.id)
      this.getAllRole()
      this.findDeptList()// 部门
    },
    findDeptList (id) {
      let param = { 'unitId': id }
      findDeptList(param).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.deptOption = data
        }
      })
    },
    getUser (id) {
      getUser(id).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.myInfo = data
        }
      })
    }
  },
  watch: {
    '$route' (to) {
      if (to.path !== '/index') {
        this.$store.dispatch('addAction', {
          route: to.path,
          name: to.name,
          index: this.topIndex
        })
      }
      localStorage.setItem('topIndex', this.topIndex)
      this.$store.dispatch('setAction', to.path)
    }
  }
}
</script>

<style scoped>
.moduleWrapper {
  height: 100%;
}
.container-main {
  height: calc(100% - 60px);
}
.el-menu.el-menu--horizontal {
  display: flex;
  justify-content: flex-end;
}
.header {
  display: flex;
  padding: 0;
}
.title {
  flex: 0 0 250px;
  width: 250px;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
  font-size: 18px;
  background-color: #000033;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  align-items: center;
}
.topMenu .iconfont {
  font-size: 25px;
}
.navLeader {
  display: flex;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #ffffff;
  background: #182b5c;
  border-bottom: 1px solid #399ffb;
}
.navLeader h3 {
  flex: 1;
  padding-left: 15px;
}
.navLeader p {
  flex: 1;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.navLeader span {
  font-size: 24px;
}
.el-menu {
  border: none;
  height: 100%;
  width: 100% !important;
}
.tabColumn {
  height: 40px;
  /* overflow: hidden; */
  display: flex;
  display: -webkit-flex;
  border-bottom: 1px solid #399ffb;
  background: #ecf0f5;
}
.tabColumn .el-tabs {
  height: 40px;
}
.navBar {
  flex: 0 0 40px;
  width: 40px;
}
.navBar .el-button {
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 0;
}
.navBar .el-button:focus {
  border: none;
  border-right: 1px solid #bd392f;
  color: #bd392f;
}
.navBar .el-button:hover {
  border: none;
  border-right: 1px solid #bd392f;
  color: #bd392f;
}
.tabWrapper {
  flex: 1;
  display: flex;
}
.tabMain {
  flex: 1;
  max-width: 1156px;
  border-bottom: 1px solid #399ffb;
}
.tabPrev,
.tabNext {
  flex: 0 0 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  color: #999;
  cursor: pointer;
}
.tabPrev {
  border-right: 1px solid #e4e7ed;
}
.tabNext {
  border-left: 1px solid #e4e7ed;
}
.tabUsed {
  /* position: relative; */
  flex: 0 0 90px;
  width: 90px;
  /* z-index: 1; */
}
.tabUsed .el-button {
  width: 90px;
  height: 40px;
  line-height: 40px;
  border-radius: 0;
  border-top: 0;
  border-bottom: none;
  padding: 0;
  background: #fff;
  color: #303133;
  font-size: 13px;
  border: none;
  border-left: 1px solid #e4e7ed;
  border-right: 1px solid #e4e7ed;
}
.el-dropdown-menu li {
  font-size: 12px;
}
.tabScreen {
  flex: 0 0 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  color: #999;
  cursor: pointer;
}
.tabColumn >>> .el-tabs--card > .el-tabs__header {
  border: none;
}
.tabColumn >>> .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
.tabColumn >>> .el-tabs__item {
  border-bottom: none;
}
.tabColumn >>> .el-tabs__item.is-active.is-closable {
  background: #399ffb;
  color: #fff;
}
.tabColumn >>> .el-tabs__nav-next,
.tabColumn >>> .el-tabs__nav-prev {
  width: 20px;
  height: 40px;
  line-height: 44px;
  text-align: center;
}
.tabColumn >>> .el-tabs__nav-next {
  border-left: 1px solid #e4e7ed;
}
.tabColumn >>> .el-tabs__nav-prev {
  border-right: 1px solid #e4e7ed;
}
.tabColumn >>> .el-tabs__nav-next i,
.tabColumn >>> .el-tabs__nav-prev i {
  font-size: 16px;
}
.noPadding {
  padding: 0;
  overflow: hidden;
  background: #ecf0f5;
}
.tabUsedDrop {
  position: absolute;
  left: 0px;
  top: 40px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: solid 1px #ccc;
  min-width: 120px;
  padding: 5px 0;
  margin: 2px 0 0;
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  text-align: center;
  background: #fff;
}
.tabUsedDrop li {
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  cursor: pointer;
  color: #777;
}
.appMain {
  height: calc(100% - 40px);
  padding: 0px;
}
.personal-center {
  padding-right: 12px;
}
.personal-center >>> .el-submenu__title {
  background: #000033 !important;
}
.avatar {
  display: inline-block;
  border-radius: 50%;
  padding-right: 8px;
}
.avatar img {
  border-radius: 50%;
}
.nickName {
  font-size: 14px;
}
.leftMenu {
  position: relative;
  z-index: 1;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}
.passWordDialog >>> .el-dialog {
  width: 25%;
}
.wlink {
  display: block;
  text-decoration: none;
  color: #fff;
}
.nickName {
  color: #fff !important;
}
.personal-li.is-active {
  color: #fff !important;
}
</style>
